<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>user-edit</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/JQuery/jquery-3.3.1.min.js"></script>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-body">

            <blockquote class="layui-elem-quote">
                温馨提示：如果最左侧的导航的高度超出了你的屏幕，你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可
            </blockquote>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>修改密码</legend>
            </fieldset>

            <form class="layui-form layui-col-lg-offset2" lay-filter="userPassword">
                <input name="userid" id="userid" type="hidden">
                <input name="password" id="password" type="hidden">
                <br><br><br><br>
                <div class="layui-form-item">
                    <div class="layui-inline layui-col-md8">
                        <label class="layui-form-label ">输入原密码</label>
                        <div class="layui-input-inline">
                            <input name="oldPassword" id="oldPassword" lay-verify="required" autocomplete="off" placeholder="请输入原密码" class="layui-input" type="password">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">输入新密码</label>
                        <div class="layui-input-inline">
                            <input name="newPassword" id="newPassword" lay-verify="required|pass" autocomplete="off" class="layui-input" type="password">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">确认新密码</label>
                        <div class="layui-input-inline">
                            <input name="repeatPassword" id="repeatPassword" lay-verify="required|pass" autocomplete="off" class="layui-input" type="password">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="changeUserPassword">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-normal">重置</button>
                    </div>
                </div>
            </form>


        </div>
    </div>
</body>
</html>

<script>

    layui.use(['form', 'layedit', 'layer'], function(){
        var form = layui.form
            ,layer = layui.layer;

        //获取当前用户数据
        $.ajax({
            type : "GET",
            url : "/system/getLoginUserInfo",
            async: false,
            success : function (result) {
                //表单input初始赋值
                form.val('userPassword', result);
            },
            error : function (result) {
                parent.layer.msg("数据交互错误！");
            }
        });

        //自定义验证规则
        form.verify({
            pass: [/(.+){6,12}$/, '密码必须6到12位']

        });

        //监听提交
        //不执数据发送接收均为json，请求发送成功，但不执行success也不执行error
        form.on('submit(changeUserPassword)', function(data){
            var userid = data.field.userid;
            var oldPassword = data.field.oldPassword;
            var newPassword = data.field.newPassword;
            var repeatPassword = data.field.repeatPassword;
            alert(JSON.stringify(data.field));
            $.ajax({
                type : "POST",
                url : "/system/changeUserPassword/" + userid + "/" + oldPassword + "/" + newPassword + "/" + repeatPassword,
                async: false,
                dataType : "json",
                contentType: "application/json;charset=utf-8",
                success : function (result) {
                    if(result.code == 0){
                        layer.msg(result.msg, {icon : 1});
                        form.val('userInfo', result.data);
                    }else{
                        layer.msg(result.msg, {icon : 5});
                    }
                },
                error : function (result) {
                    layer.msg("数据交互错误：" + result.msg);
                }
            });
            return false;
        });
    });
</script>